<template>
  <div class="details" ref="inte" v-if="lists">
    <div class="header">
      <div class="left">
        <a @click="go">
          <img src="../assets/img/fanhui.png" alt="" />
        </a>
      </div>
      <div class="mid">详情</div>
    </div>

    <div class="mainz" ref="init">
      <div class="main" ref="init1">
        <div class="title">
          <h2>{{ lists.title }}</h2>
          <p>{{ lists.num }}阅读 锁业快讯 {{ lists.times }}</p>
        </div>
        <div class="primary">
          <span>导读</span>
          {{ lists.main }}
        </div>
        <div class="content">
          {{ lists.content }}
        </div>
      </div>
    </div>

    <div class="more" @click="more" v-if="flag">
      <h3>点击查看更多</h3>
      <img
        src="https://www.suoyiren.com/source/plugin/comiis_lookfulltext/image/comiis_ico.png"
        alt=""
      />
    </div>
    <div class="bg"></div>

    <!-- 评论 -->
    <div class="comment">
      <div class="title">
        <h3>
          最新评论 <span>{{ plists.length }}</span>
        </h3>
      </div>

      <div class="items" v-for="(item, index) in plists" :key="index">
        <div class="left">
          <img :src="item.img" alt="" />
        </div>
        <div class="mid">
          <h3>{{ item.name }}</h3>
          <p>{{ item.tiems }}</p>
          <span>{{ item.content }}</span>
        </div>
        <div class="right">
          <!-- <img src="../assets/img/huifu.png" alt="" /> -->
          <div class="zan" @click="like(item.id)">
            <img src="../assets/img/huifu.png" alt="">
            {{ item.like
            }}<img v-if="!item.liked" src="../assets/img/dianzan.png" alt="" />
            <img v-if="item.liked" src="../assets/img/dianzan1.png" alt="" />
            
          </div>
        </div>
      </div>
    </div>

    <div class="duo"></div>

    <!-- 发布 -->
    <footer>
      <div class="items">
        <div class="img">
          <img src="../assets/img/bi.png" alt="" />
        </div>
        <input type="text" placeholder="说点什么吧" @keyup.enter="add" />
        <div class="imgr" @click="article">
          <img v-if="read" src="../assets/img/huifu.png" alt="" />
          <img v-if="!read" src="../assets/img/pinglun.png" alt="" />
        </div>
        <div class="imgc" @click="collection">
          <img v-if="cole" src="../assets/img/shoucang1.png" alt="" />
          <img v-if="!cole" src="../assets/img/shoucang.png" alt="" />
        </div>
      </div>
    </footer>

  </div>
</template>

<script>
export default {
  props: ["CoList"],
  data() {
    return {
      plists: [
        {
          img: "https://www.suoyiren.com/uc_server/avatar.php?uid=1041779&size=middle",
          name: "咔呐锁业",
          tiems: "2020/4/14 06:50",
          content: "单排直接用锡纸就不用这么麻烦了",
          like: 12,
          liked: false,
          id: 1,
        },
        {
          img: "https://www.suoyiren.com/uc_server/avatar.php?uid=540502&size=middle",
          name: "落玉枫",
          tiems: "2020/4/14 07:28",
          content: "是的，撞齿和电动枪也更方便。只是想了解不同的开启方法。",
          like: 5,
          liked: false,
          id: 2,
        },
        {
          img: "https://www.suoyiren.com/uc_server/avatar.php?uid=1050138&size=middle",
          name: "合肥中信开锁",
          tiems: "2020/4/14 08:15",
          content:
            "WGZ锡纸软硬开，那是一分钟的事情，何必这么干，想研究的话应该去钻研一把通开的万能钥匙",
          like: 6,
          liked: false,
          id: 3,
        },
        {
          img: "https://www.suoyiren.com/uc_server/images/noavatar_middle.gif",
          name: "诚信做事",
          tiems: "2020/4/14 10:35",
          content: "还是用翻转器快",
          like: 8,
          liked: false,
          id: 4,
        },
      ],
      id: 10,
      flag: true,
      cole: true,
      read: false,
      lists: null,
      check:null,
      // CoList:null
    };
  },
  methods: {
    //点赞
    like(id) {
      if(window.localStorage.token){
        let index = this.plists.findIndex((item) => item.id == id);
      this.plists[index].liked = !this.plists[index].liked;
      if (this.plists[index].liked) {
        this.plists[index].like += 1;
      } else {
        this.plists[index].like -= 1;
      }
      }else{
        this.$router.push('/login');
      }
    },
    // 评论
    add(event) {
      if(window.localStorage.token){
        let content = event.target.value;
      let tiemNow = new Date().toLocaleString();
      if (!content) {
        return;
      }
      this.plists.push({
        img: "https://www.suoyiren.com/uc_server/images/noavatar_middle.gif",
        id: this.id,
        name: "buD219855",
        tiems: tiemNow,
        like: 0,
        liked: false,
        content,
      });
      this.id += 1;

      event.target.value = "";
      }else{
        this.$router.push('/login');
      }
    },
    // 显示更多
    more() {
      let height = this.$refs.init.offsetHeight;
      let height1 = this.$refs.init1.offsetHeight;
      console.log(height);
      console.log(height1);
      // height = height1;
      this.$refs.init.style.height = height1 + "px";
      console.log(height);
      this.flag = false;
    },
    // 返回
    go() {
      this.$router.go(-1);
    },
    // 收藏
    collection() {
      if(window.localStorage.token){
        this.cole = !this.cole;
      if (this.cole) {
        this.$toast("取消收藏");

      } else {
        this.$emit("collection", { lists: this.lists, id: this.id });
        this.$toast("收藏成功");
      }
        window.localStorage.setItem('coll',this.cole);
      }else{
        this.$router.push('/login');
      }
    },
    //文章、评论跳转
    article() {
      this.read = !this.read;
      let height = this.$refs.init.offsetHeight; //365
      let height1 = this.$refs.init1.offsetHeight; //2828
      let height2 = this.$refs.inte.offsetHeight; //全部高度
      let height0 = height2 - height;

      if (this.read) {
        if (height2 < 1000) {
          window.scroll(0, height0);
        } else {
          window.scroll(0, height1);
        }
      } else {
        window.scroll(0, 0);
      }
    },
    getDataFun(id) {
      let index = this.CoList.findIndex((item) => item.id == id);
      this.lists = this.CoList[index];
      // console.log(this.lists);
    },
  },
  created() {
    this.getDataFun(this.$route.query.id);
    // console.log(this.CoList);
    // this.check = window.localStorage.getItem("coll")
    // console.log(this.check);
    // if (this.check=='true') {
    //     this.cole= true
    // }else{
    //   this.cole= false

    // }
  },
};
</script>

<style lang="scss" scoped>
.details {
  // transition: 1s all linear;
  .header {
    width: 100%;
    height: 48px;
    background: #53bcf5;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    .left {
      width: 34px;
      text-align: center;
      a {
        color: #fff;
        font-size: 20px;
        img {
          width: 20px;
          height: 20px;
          background-size: 100%;
        }
      }
    }
    .mid {
      flex: 1;
      text-align: center;
      font-size: 18px;
      color: #fff;
      margin-right: 15px;
    }
  }
  .mainz {
    height: 365px;
    overflow: hidden;
    .main {
      padding: 0 13px;
      .title {
        margin-top: 48px;
        h2 {
          text-align: center;
          padding: 20px 30px 5px 30px;
          font-size: 24px;
          font-weight: normal;
        }
        p {
          text-align: center;
          color: #bbbbbb;
          font-size: 13px;
        }
      }
      .primary {
        margin: 17px 13px;
        background: #f3f3f3;
        box-sizing: border-box;
        padding: 8px 10px 6px 10px;
        color: #777777;
        font-size: 14px;
        line-height: 22px;
        span {
          color: #fff;
          font-size: 12px;
          height: 16px;
          line-height: 16px;
          padding: 1px 3px 0;
          margin-top: 3px;
          margin-right: 6px;
          overflow: hidden;
          background: #ff9900;
          border-radius: 0 3px 3px 3px;
        }
      }
      .content {
        line-height: 26px;
        font-size: 16px;
        color: #333;
        img {
          width: 100%;
          margin: 7px 0;
        }
      }
    }
  }
  .more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 46px;
    h3 {
      font-size: 16px;
      color: #ff705e;
      font-weight: normal;
    }
  }
  .bg {
    width: 100%;
    height: 12px;
    background: #f8f8f8;
    margin-top: 10px;
  }
  .comment {
    .title {
      h3 {
        padding: 5px 10px;
        font-weight: normal;
        color: #333;
        font-size: 16px;
        border-bottom: 1px solid #efefef;
        span {
          color: #bbbbbb;
        }
      }
    }
    .items {
      margin: 0 13px;
      display: flex;
      border-bottom: 1px solid #efefef;
      padding: 12px 0;
      .left {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .mid {
        margin-left: 8px;
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-bottom: 20px;
        h3 {
          color: #7b797b;
          font-size: 14px;
        }
        p {
          color: #bbbec4;
          font-size: 12px;
        }
        span {
          margin-top: 17px;
          font-size: 18px;
          color: #5a5d54;
        }
      }
      .right {
        width: 40px;
        display: flex;
        align-items: flex-end;
        position: relative;
        .zan {
          display: flex;
          align-items: center;
          position: absolute;
          bottom: -10px;
          right: -4px;
        }
        img {
          width: 20px;
          height: 20px;
          background-size: 100%;
          margin-right: 14px;
        }
      }
    }
  }
  .duo {
    height: 48px;
  }
  footer {
    height: 47px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
    .items {
      display: flex;
      position: relative;
      align-items: center;
      flex: 1;
      justify-content: space-evenly;
      .img {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 4px;
        left: 34px;
        img {
          width: 100%;
        }
      }
      input {
        box-sizing: border-box;
        width: 210px;
        height: 28px;
        line-height: 28px;
        outline: none;
        border: none;
        background: #f8f8f8;
        border-radius: 12px;
        padding: 6px 0px 6px 24px;
      }
      .imgr {
        width: 22px;
        height: 22px;
        img {
          width: 100%;
        }
      }
      .imgc {
        width: 22px;
        height: 22px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
